<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <view class="subscribe flex flex-col">
    <wd-swiper :list="list3" circular height="200" indicator indicatorMode="line" />

    <view class="content p-2 mt-[20rpx] mb-[10rpx]">
      <wd-grid :column="4">
        <wd-grid-item
          :text="listItem.title"
          icon-size="56px"
          v-for="(listItem, listIndex) in listarr"
          :key="listIndex"
          use-icon-slot
        >
          <template #icon>
            <view
              :class="`icon-${listIndex + 1}`"
              :customStyle="{ paddingTop: '20rpx' }"
              :size="22"
              class="rounded-[50%]"
              @click="gonation(listItem.name)"
            />
          </template>
        </wd-grid-item>
      </wd-grid>
    </view>

    <!-- <view class="content p-2">
    
      <view>
        <wd-grid :border="false" :column="4">
          <wd-grid-item
            :text="listItem.title"
            icon-size="56px"
            v-for="(listItem, listIndex) in list"
            :key="listIndex"
            use-icon-slot
            @tap="routerPath(listItem.id)"
          >
            <template #icon>
              <view
                :class="`appointment-${listIndex + 1}`"
                :customStyle="{ paddingTop: '20rpx' }"
                :size="22"
                class="rounded-[50%]"
              />
            </template>
          </wd-grid-item>
        </wd-grid>
      </view>
    </view> -->

    <view class="flex-center">
      <view
        v-for="(item, index) in cardPurchaseList"
        :key="index"
        :style="{
          backgroundImage: `url(${urlTobase64('cardPurchasePicture', item.image)})`,
          backgroundSize: '100% 100%',
        }"
        class="cardPurchasePicture"
      >
        <view class="p-[20rpx]">
          <text class="font-bold text-white line-clamp-1 mb-2 text-sm ml-[20rpx]">
            {{ item.name }}
          </text>
          <view class="font-bold text-white mb-2 text-sm ml-[20rpx]">
            {{ item.price }}
          </view>
          <view class="flex justify-end">
            <wd-button type="warning" @click="buyCard">立即购买</wd-button>
          </view>
        </view>
      </view>
    </view>
    <image
      class="mt-[30rpx]"
      width="90vw"
      style="height: 250rpx"
      src="@/static/images/project1.png"
    />
    <MyCard>
      <view class="">
        <!-- <u-image :fade="true" duration="450" height="150" src="@/static/images/project-1.png" width="90vw" /> -->
        <view class="flex items-center justify-between">
          <view class="font-bold mt-2 mb-2">乒乓球综合训练馆</view>
          <view class="text-orange-400 font-bold">￥1800:00</view>
        </view>
        <view class="text-gray-500 text-xs">
          报名须知：1.学员需自行配备乒乓球拍，乒乓球服，乒乓球帽。
        </view>
      </view>
    </MyCard>
  </view>
</template>
<script lang="ts" setup>
import MyCard from '@/components/MyCard/MyCard.vue'
import { urlTobase64 } from '@/utils/common'
const list3 = ref(
  [...Array(9)].map(
    (_, i) => `https://sport-card.oss-cn-beijing.aliyuncs.com/trade/trade${i + 1}.jpg`,
  ),
)

const listarr = ref([
  {
    name: 'nationalfitness',
    title: '全民健身',
  },
  {
    name: 'catering',
    title: '餐饮类型',
  },
  {
    name: 'groggery',
    title: '酒店住宿',
  },
  {
    name: 'fallow',
    title: '休闲娱乐',
  },
])

const list = ref([
  {
    name: 'photo',
    title: '篮球',
    id: '1891782769969860608,1889597328248147968,1889575355098992640,1889575354834751488',
  },
  {
    name: 'lock',
    title: '乒乓球',
    id: '1889599808621121536',
  },
  {
    name: 'star',
    title: '网球馆',
    id: '1889601124491726848',
  },
  {
    name: 'hourglass',
    title: '游泳馆',
    id: '1889595916533501952',
  },
  {
    name: 'home',
    title: '冰场',
    id: '1889575354834751488,1889575354566316032,1889575355098992640',
  },
  {
    name: 'star',
    title: '羽毛球',
    id: '1889597328248147968',
  },
  {
    name: 'star',
    title: '击剑',
    id: '1889610130501275648',
  },
  {
    name: 'star',
    title: '排球',
  },
])

// 购卡数组
const cardPurchaseList = [
  {
    name: '一卡通储值卡',
    price: '100.00',
    image: 'cardPurchasePicture-4',
  },
  {
    name: '一卡通储值卡',
    price: '100.00',
    image: 'cardPurchasePicture-6',
  },
]

const routerPath = (id: any) => {
  uni.navigateTo({
    url: `/pages/subscribe/subscribeDetails?id=${id}`,
  })
}

const gonation = (name) => {
  if (name === 'nationalfitness') {
    uni.navigateTo({
      url: `/pages/subscribe/subscribeDetails?id=1889575354834751488,1889575354566316032,1889575355098992640`,
    })
  } else {
    uni.navigateTo({
      url: `/pages/index/${name}`,
    })
  }
}

// 跳转到购卡
const buyCard = () => {
  uni.navigateTo({
    url: `/pages/card/topup`,
  })
  // uni.$u.route({
  //   url: '/pages/cardPurchase/index'
  // });
}
</script>

<style lang="scss" scoped>
.subscribe {
  min-height: calc(100vh - var(--window-bottom));

  .cell-info {
    + .cell-info {
      @apply mt-4;
    }
  }
  /*循环遍历预约图片*/
  @for $i from 1 through 7 {
    .appointment-#{$i} {
      width: 120rpx;
      height: 120rpx;
      background: url('@/static/images/appointment/appointment-#{$i}.svg') no-repeat;
      background-size: contain;
    }
  }

  .cardPurchasePicture {
    width: 100%;
    min-width: 340rpx;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    + .cardPurchasePicture {
      margin-left: 20rpx;
    }
  }
}

.flex-center {
  display: flex;
}

@for $i from 1 through 4 {
  .icon-#{$i} {
    width: 120rpx;
    height: 120rpx;
    background: url('@/static/images/icon/icon-#{$i}.png') no-repeat;
    background-size: contain;
  }
}

::v-deep .wd-grid-item__content .wd-grid-item__text {
  margin-left: 12rpx;
  margin-top: 20rpx;
}
</style>
